<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition 
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    template="/templates/common/template.xhtml"      
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
    >

    <ui:define name="left">
        <ui:include src="menuacordion.xhtml" />

    </ui:define>

    <h:head>

    </h:head>


    <ui:define name="content">
        <h:outputScript target="body">
            
            var cana2=document.getElementById("idFormRol:nomRol").disabled=true;
            var cana3=document.getElementById("idFormRol:staRol").disabled=true;
            var cana4=document.getElementById("idFormRol:calRol").disabled=true;
            var cana5=document.getElementById("idFormRol:calRolPopup").disabled=true;
            var cana6=document.getElementById("idFormRol:calRolInputDate").disabled=true;
            var cana7=document.getElementById("idFormRol:calRolPopupButton").disabled=true; 
            
            function activar(){
            var cana2=document.getElementById("idFormRol:nomRol").disabled=false;
            var cana3=document.getElementById("idFormRol:staRol").disabled=false;
            var cana4=document.getElementById("idFormRol:calRol").disabled=false;
            var cana5=document.getElementById("idFormRol:calRolPopup").disabled=false;
            var cana6=document.getElementById("idFormRol:calRolInputDate").disabled=false;
            var cana7=document.getElementById("idFormRol:calRolPopupButton").disabled=false; 
            }

            function limpiarCampos(){
            document.getElementById("idFormRol:codRol").value="";
            document.getElementById("idFormRol:nomRol").value="";
            document.getElementById("idFormRol:staRol").value="";
            document.getElementById("idFormRol:calRol").value="";
            }

        </h:outputScript>


        <h:body>
            <h1>Registro de Roles</h1>
            <h:form id="idFormRol">
                <rich:tabPanel id="idTabRoles" switchType="client">
                    <rich:tab header="Datos de Rol">
                        <h:panelGrid columns="6" cellspacing="10">

                            <h:outputText value="Código:" />
                            <h:inputText id="codRol"
                                         value="#{rolesBean.roles.idRol}"

                                         >
                            </h:inputText>

                            <h:outputText value="Descripción:" />
                            <h:inputText id="nomRol" 
                                         value="#{rolesBean.roles.name}"
                                         >
                            </h:inputText>

                            <h:outputText value="State:" />
                            <h:inputText id="staRol" 
                                         value="#{rolesBean.roles.state}"
                                         >
                            </h:inputText>

                            <h:outputText value="Fecha de Registor:" />
                            <rich:calendar id="calRol"
                                           value="#{rolesBean.roles.registry}"
                                           locale="#{calendarBean.locale}"
                                           >         
                            </rich:calendar>

                        </h:panelGrid>
                    </rich:tab>

                    <rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
                        <span >
                            <span >

                                <a4j:commandButton id="btnNuevo" 
                                                   value="Nuevo" 
                                                   onclick="activar()"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>

                            <span >
                                <a4j:commandButton id="btnEditar" 
                                                   value="Editar" 
                                                   onclick="activar()"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>

                            <span >

                                <h:commandButton id="btnGrabar" 
                                                 value="Grabar"
                                                 onclick="limpiarCampos()"
                                                 action="#{rolesBean.agregarRol()}"                                                 />
                            </span>

                            <span >
                                <a4j:commandButton id="btnEliminar" 
                                                   value="Eliminar" 
                                                   action="#{rolesBean.deleteRol()}"  
                                                   render="codRol"
                                                   execute="@this">
                                </a4j:commandButton>
                            </span>

                            <span >
                                <a4j:commandButton id="Limpiar" 
                                                   value="Limpiar" 
                                                   onclick="limpiarCampos()"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>
                            <span > 
                                <h:commandButton id="btnCancelar" 
                                                 value="Cancelar"
                                                 />
                            </span>

                            <span >
                                <a4j:commandButton id="btnBuscar" 
                                                   value="Buscar" 
                                                   oncomplete="#{rich:component('popupRoles')}.show()"
                                                   action="#{rolesBean.listarRolesById()}"  
                                                   render="popupRoles"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>
                            <span >
                                <a4j:commandButton id="btnListar" 
                                                   value="Listar Roles" 
                                                   oncomplete="#{rich:component('popupRoles')}.show()"
                                                   action="#{rolesBean.listarRolesAll()}"  
                                                   render="popupRoles"
                                                   execute="@this"   >
                                </a4j:commandButton>
                            </span>

                        </span>

                    </rich:panel>
                </rich:tabPanel>

            </h:form>

            <rich:popupPanel id="popupRoles" 
                             autosized="true" 
                             onmaskclick="#{rich:component('popupRoles')}.hide()">
                <f:facet name="controls">
                    <h:outputLink value="#" onclick="#{rich:component('popupRoles')}.hide();
                                                           return false;">X</h:outputLink>
                </f:facet>
                <h:panelGrid columns="1" id="editGrid">
                    <rich:dataTable value="#{rolesBean.listaRoles}" 
                                    var="rol" 
                                    iterationStatusVar="it" 
                                    id="table" 
                                    rows="15">
                        <rich:column>
                            <f:facet name="header">Codigo</f:facet>
                            <h:outputText value="#{rol.idRol}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">Descripcion</f:facet>
                            <h:outputText value="#{rol.name}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">State</f:facet>
                            <h:outputText value="#{rol.state}" />
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">Fecha Registro</f:facet>
                            <h:outputText value="#{rol.registry}" />
                        </rich:column>

                        <rich:column>
                            <a4j:commandLink styleClass="no-decor" render="codRol, nomRol, staRol, calRol" execute="@this" action="#{rolesBean.pintarFormulario()}"
                                             oncomplete="#{rich:component('popupRoles')}.hide()">
                                <h:graphicImage value="/images/icons/edit.gif"/>
                                <f:setPropertyActionListener target="#{rolesBean.roles.idRol}" value="#{rol.idRol}" />
                            </a4j:commandLink>
                        </rich:column>

                        <f:facet name="footer">
                            <rich:dataScroller page="1" />
                        </f:facet>
                    </rich:dataTable>
                </h:panelGrid>:
            </rich:popupPanel>

        </h:body>

    </ui:define>



</ui:composition>

